<template>
	<!-- <view class="screen">
		<view>
			<text>2024-11</text>
			<up-icon name="arrow-down-fill" color="#000000" size="15"></up-icon>
		</view>
	</view> -->
	<view class="info-item"
		v-for="(item,index) in list">
		<view>
			<view>{{item.title}}</view>
			<view>{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}</view>
		</view>
		<view class="red-box">
			<view class="red">{{item.nums.slice(0,1)== '-'? item.nums: `+${item.nums}`}}</view>
			<view style="margin-top: 24rpx;">{{item.balance}}</view>
		</view>
	</view>
	<view class="tips">
		全部明细已获取~~
	</view>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../api/api';
	import { reactive, ref } from 'vue';

	onLoad((option) => {
		if (option.type == 1) return oli_bills({ is_send_bill: 1 })
		oli_bills()
	})

	const list = reactive([])

	function oli_bills(data = {}) {
		api.user.oli_bills(data).then(res => {
			Object.assign(list, res.data)
		})
	}
</script>

<style lang="scss">
	.info-item {
		padding: 0 32rpx;
		height: 150rpx;
		border-bottom: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view:nth-child(1) {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #9A9A9A;
				margin-top: 24rpx;
			}
		}

		.red-box {
			color: #aaaaaa;
			font-size: 24rpx;

			.red {
				font-weight: 600;
				font-size: 28rpx;
				color: #FF345E;
			}

			.green {
				font-weight: 600;
				font-size: 28rpx;
				color: #3AB700;
			}
		}
	}

	.tips {
		margin-top: 32rpx;
		text-align: center;
		width: 100%;
		font-size: 26rpx;
		color: #c1c1c1;
	}

	.screen {
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;

		>view {
			display: flex;
			align-items: center;
		}

	}
</style>